{% extends "base.html" %}

{% block label %}
    <div class="col-lg-12">
        <h1 class="page-header">职员管理-添加</h1>
    </div>
{% endblock %}

{% block content %}
    <div class="col-lg-12">
        <div class="row">
            <form>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="form-group">
                    <label class="control-label">用户名：</label>
                    <input class="form-control" type="text" id="username">
                    <label class="text-primary username_error"></label>
                </div>
                <div class="form-group">
                    <label class="control-label">密码：</label>
                    <input class="form-control" type="password" id="password">
                    <label class="text-primary password_error"></label>
                </div>
                <div class="form-group">
                    <label class="control-label">昵称：</label>
                    <input class="form-control" type="text" id="nickname">
                </div>
                <div class="form-group">
                    <label class="control-label">性别：</label>
                    <select class="form-control" id="gender">
                        <option value="男" selected>男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label">年龄：</label>
                    <input class="form-control" type="number" id="age">
                </div>
                <div class="form-group">
                    <label class="control-label">电话：</label>
                    <input class="form-control" type="text" id="phone">
                </div>
                <div class="form-group">
                    <label class="control-label">邮箱：</label>
                    <input class="form-control" type="text" id="email">
                </div>
                <div class="form-group">
                    <label class="control-label">头像：</label>
                    <input type="file" id="photo">
                </div>
                <div class="form-group">
                    <label class="control-label">地址：</label>
                    <textarea class="form-control" id="address"></textarea>
                </div>
                <div class="form-group">
                    <label class="control-label">部门：</label>
                    <select class="form-control" id="department_id">
                        {% for d in department_list %}
                        <option value="{{ d.id }}">{{ d.d_name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label class="control-label">职位：</label>
                    <select class="form-control" id="position_id">
                        {% for p in position_list %}
                        <option value="{{ p.id }}">{{ p.p_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <button id="submit" type="button" class="btn btn-primary btn-block">提交</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        $("#submit").click(
            function(){
                //js当中可以使用formdata存储数据，发到后端
                var fm = new FormData() //创建form对象
                //常规数据添加
                fm.append("username",$("#username").val()); //添加要提交的数据
                fm.append("password",$("#password").val()); //添加要提交的数据
                fm.append("nickname",$("#nickname").val()); //添加要提交的数据
                fm.append("gender",$("#gender").val()); //添加要提交的数据
                fm.append("age",$("#age").val()); //添加要提交的数据
                fm.append("phone",$("#phone").val()); //添加要提交的数据
                fm.append("email",$("#email").val()); //添加要提交的数据
                fm.append("address",$("#address").val()); //添加要提交的数据
                fm.append("department_id",$("#department_id").val()); //添加要提交的数据
                fm.append("position_id",$("#position_id").val()); //添加要提交的数据
                //ajax添加csrf
                fm.append("csrf_token","{{ csrf_token() }}");
                console.log('{{ csrf_token() }}');
                //图片添加
                var pic = document.getElementById("photo").files[0];
                fm.append("photo",pic);
                //提交的地址
                var url = "/add_person/";
                //发起ajax请求
                $.ajax(
                    {
                        url: url,
                        type: "post",
                        data: fm,
                        contentType: false, //禁止设置内容类型
                        processData: false, //禁止jq对数据进行处理
                        success: function(data){
                            console.log(data)
                            alert("保存成功")
                            if(data["result"] == "success"){
                                window.location.reload()
                            }
                        },
                        error: function(error){
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
{% endblock %}